<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>设计癖</title>
    </head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        body{
            background: #f5f5f5;
        }
        .header{
            height: 67px;
            background: #fff;
            position: fixed;
            top: 0px;
            border-bottom: 1px solid #e5e5e5;
        }
        .banner{
            height: 512px;
            width: 1209px;
            background: #f5f5f5;
            margin: 91px auto 25px;
            border:1px solid #999999;
        }
        .list{
            width: 1209px;
            height: 35px;
            margin: 0px auto;
        }
        .con{
            width: 1209px;
            height: 968px; 
            margin: 25px auto;
            
            background: #dedede;
        }
        .more{
            width: 1209px;
            height: 36px;
            background: #ffffff;
            margin: 25px auto;
            text-align: center;
            line-height: 36px;
            
        }
        .banner .left{
            height: 512px;
            width: 907px;
            float: left;
        }
        .banner .righr{
            width: 290px;
            height: 512px; 
            float: right;
            margin: 12px 0px 0px 0px;
        }
        .right .top{
            margin-bottom: 7px;
            float: right;
        }
        .right .center{
            margin-bottom: 7px;
            float: right;
        }
        .right .bottom{
            float: right;
        }
        .banner .left img{
            height: 512px;
        }
        .banner .right img{
            height: 163px;
            width: 290px;
        }
        .list .one,.two,.three,.four{
            height: 35px;
            width: 132px;
            float: left;
            border:1px solid #999999;
        }
        .con img{
            width: 289px;
            float: left;
            border: 1px solid grey;
        }

        .con .yi,.er,.san{
            margin: 0px 16px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .con .si{
            margin: 0px 0px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .con .wu,.liu,.qi{
            margin: 0px 16px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .con .ba{
            margin: 0px 0px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .con .jiu,.shi,.syi{
            margin: 0px 16px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .con .ser{
            margin: 0px 0px 12px 0px;
            height: 313px;
            width: 290px;
            float: left;
            
        }
        .pi{
            width: 230px;
            height: 66px;
            margin: 0px 870px 0px 305px;
            float: left;

        }
        .pi a{
            width: 35px;
            
            background: yellow;
            text-decoration:none;
            
            border-radius: 100%;
                               
        }
        .pi .zan,.meng,.ha,.cao{
            margin: 14px 12px 16px 0px;
            
            font-size: 20px;
            line-height: 35px;
        }
        .pi .mai{
            margin: 14px 0px 16px 0px;
           
            font-size: 20px;
            line-height: 35px;
        }
        .last{
            height: 354px;
            width: 1209px;
            margin: auto;
        }
        .all{
            width: 1071px; 
            height: 59px;
            float: left;
            margin: 63px 107px 37px 33px;
        }
        .all .r{
            height: 37px;
            width: 43px;
            float: left;
            margin: 0px 81px 0px 0px;
        }
        .all .b{
            height: 45px;
            width: 94px;
            float: left;
            margin: 0px 70px 0px 0px;
        }
        .all .c{
            height: 27px;
            width: 99px;
            float: left;
            margin: 0px 40px 0px 0px;
        }
        .all .d{
            height: 50px;
            width: 150px;
            float: left;
            margin: 0px 40px 0px 0px;
        }
        .all .e{
            height: 45px;
            width: 88px;
            float: left;
            margin: 0px 74px 0px 0px;
        }
        .all .f{
            height: 34px;
            width: 108px;
            float: left;
            margin: 0px 33px 0px 0px;
        }
        .all .g{
            height: 50px;
            width: 150px;
            float: left;
            margin: 0px 0px 0px 0px;
        }
        .last p{
            color: #9c9c9c;
        }
        .last .he{
            margin-top: 33px;
        }
        
    </style>
    <body>
        <div class="header">
            <div class="pi">
                <a class="zan" href="">赞</a>
                <a class="meng" href="">萌</a>
                <a class="ha" href="">哈</a>
                <a class="cao" href="">艹</a>
                <a class="mai" href="">买</a>
            </div>
            
        </div>
        <div class="banner">
            <div class="left">
                <img src="s003.jpg" alt="">
                
            </div>
            <div class="right">
                <div class="top">
                    <img src="s02.jpg" alt="">
                    
                </div>
                <div class="center">
                    <img src="s03.jpg" alt="">
                </div>
                <div class="bottom">
                    <img src="s04.jpg" alt="">
                </div>
            </div>
        </div>
        <ul class="list">
            <li class="one">最新</li>
            <li class="two">最热</li>
            <li class="three">热议</li>
            <li class="four">随机</li>
        </ul>
        <ul class="con">
            <li class='yi'><img src="i01.jpg" alt="">用水才能擦去笔迹， 它只想保护好设计师的创意</li>
            <li class='er'><img src="i02.jpg" alt="">马桶也要有优雅的姿态</li>
            <li class='san'><img src="i03.jpg" alt="">健身也走「科技范」，你以为这仅仅只是个瑜伽垫？</li>                      
            <li class='si'><img src="i04.jpg" alt="">牙缝清洁怎么办？牙签牙线都过时了，用「刷子」刷吧</li>                      
            <li class='wu'><img src="i05.jpg" alt="">矮怎么了？照样能够拿到书架顶端的书</li>
            <li class='liu'><img src="i06.png" alt="">这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</li>
            <li class='qi'><img src="i07.png" alt="">中国国际设计节PK世界工业设计大会，那个更棒？</li>                       
            <li class='ba'><img src="i08.jpg" alt="">首届世界工业设计大会在家门口杭州，中国设计师们燥起来</li>                       
            <li class='jiu'><img src="i09.jpg" alt="">窝在北方的暖炉里，你应该需要这样一个散热阀门？</li>
            <li class='shi'><img src="i10.jpg" alt="">废纸打造的铅笔，像一朵朵落入凡间的花</li>
            <li class='syi'><img src="i11.jpg" alt="">倚靠在毯子上，这件事听着就让人舒坦</li>                     
            <li class='ser'><img src="i12.jpg" alt="">别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就能变</li>                      
        </ul>
        <p class="more">太快了吧，慢慢来：）</p>
        <div class="last">
            <p>合作伙伴</p>
            <div class="all">
            <div class="r"><img src="x01.png" alt=""></div>
            <div class="b"><img src="x02.png" alt=""></div>
            <div class="c"><img src="x03.png" alt=""></div>
            <div class="d"><img src="x04.png" alt=""></div>
            <div class="e"><img src="x05.png" alt=""></div>
            <div class="f"><img src="x06.png" alt=""></div>
            <div class="g"><img src="x07.jpg" alt=""></div>
            </div>
            <p>友情链接</p>
            <p class="he">DRC北京工业设计创意产业基地 丨 中国工业设计协会 丨 设计邦 丨 网易家居 丨 凤凰家居 丨 智东西 丨 壹网空间 丨 七牛云存储 丨 高清图片 丨 Fotor</p>
        </div> 
    </body>
</html>